@charset "utf-8";
//第一层，轮播图块内容
.fs{padding:5px 78.5px; position: relative; width:1191px; margin: 0 auto;
    //左边广告栏
    .left{position: absolute; display: flex; z-index: 20; left: -174px; cursor: pointer;
        a{display: block; width: 0; overflow: hidden; transition: all 0.3s; position: relative; z-index: 20;}
        &:hover a{width: 790px;}
        a img{position: relative; z-index: 20;}
    }
}

//第一列 logo下面的导航
.fs_col1{width: 190px; height: 480px; background: #fff; margin-top: -10px;color: #636363; float: left; margin-right: 10px;position: relative; margin-left: 1px;
    .nav1>li{padding-left: 18px; height: 26px; line-height: 26px;transition: background-color .2s ease;
            a{color: #626262;transition: color .2s ease; font-size: 14px;&:hover{color: #c81623;}} 
            &:hover{background: #d9d9d9;}
        }

    .nav1>li:first-of-type{margin-top: 6px;}
    
    .nav2{ position: absolute; width: 998px; height: 450px; padding: 20px 0 10px 20px; z-index: 20; background: #fff;
            top: 0; left: 190px;box-shadow: 3px 6px 25px #c3c3c3;display: none;
          .nav2_left{ float: left;
              .nav2_top li{float: left; 
                  a{display: block; padding:0 10px; background: #333;float: left; height: 24px;line-height: 24px; color: #fff; margin-right: 10px;}
                  a:hover{opacity: 0.8;}
              }
              
              .nav2_content { margin-top: 20px;
                  a{color:#666; &:hover{color: #c81623;}}
                  .nav2_item {margin-top: 10px;}
                  h3{text-align: right;width: 59px; font-size: 12px; float: left; padding-right: 10px;}
                  ul{float: left; width: 710px;}
                  li{float: left;padding: 0 10px;height: 16px;border-left: 1px solid #e0e0e0;line-height: 16px; margin:3px 0;}
              }
          }
          .nav2_right{float: right; margin-right: 20px;
                    figure{margin-top: 5px;}
          }
    }
}

//第二列 轮播图
.fs_col2{width: 590px; height: 470px; overflow: hidden; position: relative;float: left; margin-right: 10px;
    figure{width: 100%; height: 100%; position: relative;
            a{position: absolute; left: 0; top: 0; opacity: 0;}
            a:first-of-type{opacity: 1;}
    }
    img{
        display: block; width: 590px; height: 100%;
    }

    ul{
        position: absolute;bottom: 10px;  width: 152px;
        left:46px;
    }
    .bullet{border-color: hsla(0,0%,100%,.4);}
    .focus{
        background: hsla(0,0%,100%,.2)!important;
    }
    .focus:after{background: #fdd9dd!important;}
}
//通用子弹头
.bullet_wrap{display: flex; justify-content: space-around;
    .bullet { width: 18px; height: 18px; border-radius: 50%; position: relative;
        &:after{content:"";display: block;width:6px; height:6px;border-radius: 50%;border:2px solid #b9beba;
            cursor: pointer; position: absolute; left: 4px; top:4px;}
    }
    .focus{
        background:#fdd9dd;
    }
    .focus:after{background:#eb3436;border: 2px solid transparent;}
}


//通用左右按钮
.goback,.gonext{background: rgba(0,0,0,0.2); border: 0; outline: 0;width: 20px; height: 40px; position: absolute; 
    top: 45%; cursor: pointer;z-index: 2; &:hover{background: #000; opacity: 0.5;} }
.gonext{
     right: 0;
}
.goback{left: 0;}

//第三列 图片广告三块
.fs_col3{float: left; margin-right: 10px;
    a {width: 190px; display: block;}
    figure{width: 190px; height: 150px; margin-bottom: 10px;}
    figure:hover {opacity: 0.8;}
}

//第四列 服务
.fs_col4{width: 190px; height: 470px; float: left; background: #fff;}
.fs_col4 .user{ padding-top: 62px; position:relative; height: 78px; text-align: center;}
.fs_col4 .head_photo {position: absolute;left: 50%;top: -10px;margin-left: -34px;width: 65px;height: 65px; border-radius: 50%;}
.fs_col4 .head_photo a{display: block; width: 55px; height: 55px;border: 5px solid #e3e1df; border-radius: 50%;    box-shadow: 3px 6px 25px #c3c3c3;}
.fs_col4 .head_photo a img {width: 100%; height: 100%; border-radius: 50%;}

.fs_col4 .user_sl {}
.fs_col4 .user_sl a:not(.quit){display: inline-block; width: 20px; height: 20px;}
.fs_col4 .user_sl a i{display:block;width: 20px; height: 20px; background: url(https://misc.360buyimg.com/mtd/pc/index_2017/2.1.0/static/images/sprite.user.png) no-repeat;}
.fs_col4 .user_sl a:nth-child(1) i{ background-position: -111px -21px;}
.fs_col4 .user_sl a:nth-child(2) i{ background-position: -136px -46px;}
.fs_col4 .user_sl .quit{ display:inline-block; transform: translateY(-5px);}

.fs_col4 .plus {width: 150px;padding: 0 5px;margin:5px auto;height: 25px;line-height: 25px;font-size: 12px;text-align: center;border-radius: 13px;transition:all 0.8s ease; box-shadow: 6px 8px 20px rgba(45,45,45,.15);}
.fs_col4 .plus a {color: #e43f3b;white-space: nowrap;}
.fs_col4 .plus:hover{background: #e01222;}
.fs_col4 .plus:hover a {color: #fff;}

.fs_col4 {
    .news{padding-left: 5px; margin-top: 20px;
         p{position: relative;}
         a{padding: 0 10px; color: #666; &:hover{color: #e33333;} ;}
         p a:first-of-type{border-right: 1px #dfe0e1 solid;}
         .more{float: right;}
         .cuxiao:nth-of-type(2){display: none;}
         .redline {    position: absolute;
                        bottom: -5px;
                        left: 10px;
                        width: 27px;
                        height: 2px;
                        background: #db192b;
                        display: block;
                        
                }
         ul{margin-top: 15px; li{margin-bottom: 3px;}
            a{display: block; width: 150px; padding: 0; margin: 0 10px;}
            li:last-of-type a{border-bottom: 1px #eee solid; padding-bottom: 10px;}
         }
    }
    .service{padding: 11px; padding-top: 22px;
        a{width: 42px; height: 51px; display: block;color: #bea68d; &:hover{color: #e33333;}}
        table {vertical-align: middle;}
        td{text-align: center;}
        i{display: block; width: 20px; height: 20px; margin: 0 auto; background: url(../images/sprite.png) no-repeat -155px -4px; background-size: 316px 224px; margin-bottom: 5px;}
        
        tr:nth-of-type(1) td:nth-of-type(2) i{background-position:-179px -4px ;}
        tr:nth-of-type(1) td:nth-of-type(3) i{background-position:-206px -4px ;}
        tr:nth-of-type(1) td:nth-of-type(4) i{background-position:-2px -4px ; width: 22px;}
        
        tr:nth-of-type(2) td:nth-of-type(1) i{background-position:-230px -4px ;}
        tr:nth-of-type(2) td:nth-of-type(2) i{background-position:-256px -4px ;}
        tr:nth-of-type(2) td:nth-of-type(3) i{background-position:-281px -4px ;}
        tr:nth-of-type(2) td:nth-of-type(4) i{background-position:-28px -4px ;}
        
        tr:nth-of-type(3) td:nth-of-type(1) i{background-position:-54px -3px ;}
        tr:nth-of-type(3) td:nth-of-type(2) i{background-position:-78px -3px ;}
        tr:nth-of-type(3) td:nth-of-type(3) i{background-position:-103px -3px ;width: 22px;}
        tr:nth-of-type(3) td:nth-of-type(4) i{background-position:-130px -3px ;}
        }
}